<ion-header class="ion-header" [ngClass]="{ 'top-header' : headerActive }">
    <ion-toolbar>
        <ion-buttons class="button-left">
            <img navBackButton src="assets/imgs/return.svg" *ngIf='canGoBack' alt="">
            <img src="assets/imgs/scan.svg" *ngIf='!canGoBack' (click)="scan()">
        </ion-buttons>
        <ion-title (click)="Search('1')">{{ companyName }}</ion-title>
        <ion-buttons class="button-right" (click)="Search('0')">
            <img src="assets/imgs/search.svg" alt="">
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content class="ion-content" scroll-y="false" (ionScroll)="logScrolling($event)" scroll-events="true" [ngClass]="{ 'active': contentActive }" (swipeup)="canRun ? showMore() : '';">
    <div class="bg-top" [ngStyle]="person.headStylebg"></div>
    <div class="top">

        <!-- 头像 -->
        <div class="circle text-center">
            <div class='head-portrait' [ngStyle]="person.headStyle"></div>
        </div>
        <!-- <canvas id="myCanvas"></canvas> -->


        <!-- 参数项 -->
        <div style="position: relative;">
            <span class="bg-shadow" [ngStyle]="person.headStylebg"></span>
            <span class="bg-shadow" [ngStyle]="person.headStylebg"></span>
            <div class="midDiv">
                <div class="mid-content" *ngFor="let data of indexDataList" [ngStyle]="{display: data.isShow? 'block': 'none'}">
                    <div class="mid-title">
                        <span class="inline-data" [class.alarm-data]="(data.IndexName === '传感器' && ( data.Data2 !=null ) && ( data.Data1 > 0 ))  || (data.IndexName === '数据栈' && (data.Data2 != null) && (data.Data1 > 0))">
                            {{ data.Data1 | numberAbs:data.Flag }}
                            <i>{{ data.Unit1 }}</i>
                        </span>
                        <span class="total-data" *ngIf='data.Data2'>{{ data.Data2 }}
                            <i>{{ data.Unit2 }}</i>
                        </span>
                    </div>
                    <div class="mid-name">
                        {{ data.IndexName }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 通知 -->
        <div class='inform' *ngIf='blocInfo && blocInfo.Announcement && blocInfo.Announcement.length'>
            <img src="assets/imgs/gallery/SVG/17124.svg">
            <marquee direction="left">{{ blocInfo.Announcement }}</marquee>
        </div>

    </div>

    <div class='bottom-part'>
        <div class="area area-top">
            <div class="area-content">
                <div class="each-module" *ngFor="let f of PList" (click)="goPage(f)">
                    <img [imgStateUrl]='"assets/imgs/gallery/SVG/"+f.icon+".svg"' imgDefault="assets/imgs/gallery/SVG/17028.svg" *ngIf="f.menuName !== undefined">
                    <p>{{ f.menuName }}</p>
                </div>
            </div>
        </div>

        <hr class="area-Line" style="height:8px;width:100%;background-color: #F5F5F5 !important;margin:0;" *ngIf='PList.length>0'>

        <div class="area area-info" id="elm">
            <h3 class="area-title">项目详情</h3>
            <div class="area-content" *ngIf="projectList.length">
                <span class="area-shadow" [ngStyle]="{ 'position': shadowActive? 'fixed': 'absolute' }"></span>
                <span class="area-shadow" [ngStyle]="{ 'position': shadowActive? 'fixed': 'absolute' }"></span>
                <div class="area-body" [ngClass]="{ 'region-active': bodyActive }">
                    <div class="area-region">
                        <div class="areaScroll">
                            <div class="region-module" *ngFor="let data of projectList;let i = index" (click)="toCity(i, projectList)">
                                <span *ngIf="data.companyProjectGroupMode === 1" [ngClass]="{ active: i === cityIndex }">{{ data.provinceName || '其它' }}</span>
                                <span *ngIf="data.companyProjectGroupMode === 2" [ngClass]="{ active: i === cityIndex }">{{ data.cityName || '其它' }}</span>
                                <span *ngIf="data.companyProjectGroupMode === 3" [ngClass]="{ active: i === cityIndex }">{{ data.districtName || '其它' }}</span>
                                <span *ngIf="data.companyProjectGroupMode === 4" [ngClass]="{ active: i === cityIndex }">{{ data.groupName || '其它' }}</span>
                            </div>
                        </div>
                        <div class="scrollLine">
                            <hr class="line">
                        </div>
                    </div>
                </div>
                <div (pandown)="isDown && isFinished? showLess($event) : ''" class="area-project" *ngFor="let items of projectList;let i = index" [ngStyle]="{ display: i === cityIndex ? 'flex' : 'none' }" [ngClass]="{ 'active': isSelected }">
                    <div class="project-module" *ngFor="let item of (items.groups || items.projectList)" (click)="goProject(item)">
                        <img [imgStateUrl]='item.appLogo' imgDefault="assets/imgs/default-bg.png" *ngIf="item.projectName !== undefined">
                        <p class="each-name">{{ item.projectName }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ion-content>